<%--
  Created by IntelliJ IDEA.
  User: 22533
  Date: 2021/10/30
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<script>

<%--    鼠标悬停事件--%>
var xmlHttpRequest;
function createXMLHttpRequest()
{
    if (window.XMLHttpRequest) //非IE浏览器
    {
        xmlHttpRequest = new XMLHttpRequest();
    }
    else if (window.ActiveObject)//IE6以上版本的IE浏览器
    {
        xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
    }
    else //IE6及以下版本IE浏览器
    {
        xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
    }
}

function showInform(categoryId) {

    document.getElementById("check").innerHTML = xmlHttpRequest.readyState;
    document.getElementById("check").innerHTML = xmlHttpRequest.status;

    console.log(categoryId);
    sendRequest("categoryShowJsServlet?categoryId=" + categoryId);

}

function sendRequest(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange = processResponse;
    xmlHttpRequest.send(null);
}

function processResponse() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var resp = xmlHttpRequest.responseText;
            //显示悬浮层
            var inform = document.getElementById("inform");
            inform.innerText = resp;
            inform.style.display = "block";
        }
    }
}

//隐藏悬浮层
function hiddenInform(event){
    var informDiv = document.getElementById('inform');
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = informDiv.offsetLeft;
    var divy1 = informDiv.offsetTop;
    var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
    var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        document.getElementById('inform').style.display='none';
    }
}


<%--购物车事件--%>
var xmlHttpRequest;
function createXMLHttpRequest()
{
    if (window.XMLHttpRequest) //非IE浏览器
    {
        xmlHttpRequest = new XMLHttpRequest();
    }
    else if (window.ActiveObject)//IE6以上版本的IE浏览器
    {
        xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
    }
    else //IE6及以下版本IE浏览器
    {
        xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
    }
}

function updateCart() {
    var quantity = document.getElementById("quantity").value;
    sendRequest("updateCartJSServlet?quantity="+ quantity);
}

function sendRequest(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange = processResponse;
    xmlHttpRequest.send(null);
}

function processResponse() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var resp = xmlHttpRequest.responseText;
            var array = resp.split(",");
            var quantity = document.getElementById("quantity");
            var total = document.getElementById("total");
            var subtotal = document.getElementById("subtotal");

            quantity.innerText = array[0];
            total.innerText = array[1];
            subtotal.innerText = array[2];
        }
    }
}


<%--点击确认订单事件--%>
    function dealClicked()
    {
        var shipping = document.getElementById("showAddress");
        shipping.innerHTML = "<br/><br/><br/><br/>"+
            "<form action='confirmOrderForm' method='post'>"+
    "<table>"+
    "<tr>"+
    "<th colspan=2>Payment Details</th>"+
    "</tr>"+
        "<tr>"+
            "<td>Card Type:</td>"+
            "<td>"+
                "<select>"+
                    "<option value='Visa' selected='selected'>Visa</option>"+
                    "<option value='MasterCard'>MasterCard</option>"+
                    "<option value='American Express'>American Express</option>"+
                "</select>"+
            "</td>"+
        "</tr>"+
        "<tr>"+
            "<td>Card Number:</td>"+
            "<td>"+
                "<input type='text' name='creditCard' value='999999999999'>* Use a fake number!"+
            "</td>"+
        "</tr>"+
        "<tr>"+
            "<td>Expiry Date (MM/YYYY):</td>"+
            "<td>"+
                "<input type='text' name='expiryDate' value='12/03'/>"+
            "</td>"+
        "</tr>"+
        "<tr>"+
            "<th colspan=2>Billing Address</th>"+
        "</tr>"+
        "<tr>"+
            "<td>First name:</td>"+
            "<td>"+
                "<input type='text' name='billToFirstName' value='${sessionScope.order.billToFirstName}' />"+
            "</td>"+
        "</tr>"+
        "<tr>"+
            "<td>Last name:</td>"+
            "<td>"+
                "<input type='text' name='billToLastName' value='${sessionScope.order.billToLastName}' />"+
        "    </td>"+
        "</tr>"+
        "<tr>"+
            "<td>Address 1:</td>"+
            "<td>"+
        "        <input type='text' size='40' name='billAddress1' value='${sessionScope.order.billAddress1}' />"+
        "    </td>"+
        "</tr>"+
        "<tr>"+
        "    <td>Address 2:</td>"+
        "    <td>"+
        "        <input type='text' size='40' name='billAddress2' value='${sessionScope.order.billAddress2}' />"+
        "    </td>"+
        "</tr>"+
        "<tr>"+
        "    <td>City:</td>"+
        "    <td>"+
        "        <input type='text' name='billCity' value='${sessionScope.order.billCity}' />"+
        "    </td>"+
        "</tr>"+
        "<tr>"+
        "    <td>State:</td>"+
        "    <td>"+
        "        <input type='text' size='4' name='billState' value='${sessionScope.order.billState}' />"+
        "    </td>"+
        "</tr>"+
        "<tr>"+
        "    <td>Zip:</td>"+
        "    <td>"+
        "        <input type='text' size='10' name='billZip' value='${sessionScope.order.billZip}' />"+
        "    </td>"+
        "</tr>"+
        "<tr>"+
        "    <td>Country:</td>"+
        "    <td>"+
        "        <input type='text' size='15' name='billCountry' value='${sessionScope.order.billCountry}' />"+
        "    </td>"+
        "</tr>"+

        "<tr>"+
        "    <td colspan=2>"+
        "    <input type='checkbox' name='shippingAddressRequired'/>"+
        "        Ship to different address..."+
        "</td>"+
    "</tr>"+
    "</table>"+
    "    <input type='submit' name='newOrder' value='Continue'/>"+
    "</form>"+
    "<div onclick='backToCart()'>close</div>"
        ;
    }



    function backToCart(){
        var cart = document.getElementById("showAddress");
        cart.innerHTML="<div></div>"
    }


<%--    购物车功能的代码--%>

<%--    自动补全部分的js代码--%>
    Array.prototype.unique = function(){
        this.sort();
        var res = [];
        var json = {};
        for (var i = 0; i < this.length; i++) {
            if(!json[this[i]]){
                res.push(this[i]);
                json[this[i]] = 1;
            }
        }
        return res;
    }

    // 对样式操作
    var setClass = {
        hasClass: function(elements,cName){ // 判断是否含有某个class
            if(elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") ))
                return true;
            else
                return false;
        },
        addClass: function(elements,cName){ // 添加class
            if( !this.hasClass( elements,cName ) ){
                elements.className += " " + cName;
            };
        },
        removeClass: function(elements,cName){  // 移除某个class
            if( this.hasClass( elements,cName ) ){
                elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );
            }
        }
    }

    var Bind = function(This){
        return function(){
            This.init();
        }
    }

    function AutoComplete(keyword,auto,arr) {
        this.obj = document.getElementById(keyword);
        this.autoObj = document.getElementById(auto);
        this.search_value = ""; //当前的搜索输入值
        this.index = -1;        //当前选中的DIV的索引
        this.value_arr = arr;   //数据库中供检索的值 不包含重复值
    }
    AutoComplete.prototype = {
        // 初始化
        init: function(){
            var This = this;
            setClass.removeClass(This.autoObj,"hidden");
            this.autoObj.style.left = this.obj.offsetLeft + "px";
            this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
        },
        //删除自动完成需要的所有DIV
        deleteDIV: function(){
            while(this.autoObj.hasChildNodes()){
                this.autoObj.removeChild(this.autoObj.firstChild);
            }
            setClass.addClass(this.autoObj,"hidden");
        },
        autoOnmouseover: function(index){
            if(index != this.index){
                setClass.addClass(this.autoObj.children[index],"on");
                setClass.removeClass(this.autoObj.children[this.index],"on");
                this.index = index;
            }
        },
        setValue: function(This){
            return function(){
                This.obj.value = this.seq;
                setClass.addClass(This.autoObj,"hidden");
            }
        },
        // 响应键盘
        pressKey: function(event){
            var code = event.keyCode;
            var length = this.autoObj.children.length;
            if(code == 38){     //↑
                setClass.removeClass(this.autoObj.children[this.index],"on");
                this.index--;
                if(this.index < 0){
                    this.index = length - 1;
                }
                setClass.addClass(this.autoObj.children[this.index],"on");
                this.obj.value = this.autoObj.children[this.index].seq;
            }else if(code == 40){   //↓
                setClass.removeClass(this.autoObj.children[this.index],"on");
                this.index++;
                if(this.index > length-1){
                    this.index = 0;
                }
                setClass.addClass(this.autoObj.children[this.index],"on");
                this.obj.value = this.autoObj.children[this.index].seq;
            }else{          //回车
                this.obj.value = this.autoObj.children[this.index].seq;
                setClass.addClass(this.autoObj,"hidden");
                this.index = -1;
            }
        },
        // 程序入口
        start: function(event){
            event = event || window.event;
            var code = event.keyCode;
            var This = this;
            if(code != 13 && code != 38 && code != 40){
                this.init();
                this.deleteDIV();
                this.search_value = this.obj.value;
                var valueArr = this.value_arr.unique();
                //去掉前后空格不能为空
                if(this.obj.value.replace(/(^\s*)|(\s*$)/g,"") == ""){ return;}
                //判断数组中是否含有输入的关键字
                try{
                    var reg = new RegExp("("+ this.obj.value +")","i"); //输入"aaa" 则 reg = /(aaa)/i
                }catch(e){
                    alert(e.message);
                }
                var div_index = 0;  //记录匹配索引个数
                for (var i = 0; i < valueArr.length; i++) {
                    if(reg.test(valueArr[i])){
                        var div = document.createElement("div");
                        div.className = "auto_out";
                        div.seq = valueArr[i];
                        div.index = div_index;
                        div.innerHTML = valueArr[i].replace(reg,"<strong>$1</strong>");
                        this.autoObj.appendChild(div);
                        setClass.removeClass(this.autoObj,"hidden");
                        div_index++;
                        if(div_index == 1) {
                            setClass.addClass(this.autoObj.firstChild,"on");
                            this.index = 0;
                        }
                        div.onmouseover = function(){
                            This.autoOnmouseover(this.index);
                        }
                        div.onclick = this.setValue(This);
                    }
                }
            }else{
                this.pressKey(event);
            }
            window.onresize = Bind(This);
        }
    }

    var xmlHttpRequest;
    function createXMLHttpRequest()
    {
        if (window.XMLHttpRequest) //非IE浏览器
        {
            xmlHttpRequest = new XMLHttpRequest();
        }
        else if (window.ActiveObject)//IE6以上版本的IE浏览器
        {
            xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
        }
        else //IE6及以下版本IE浏览器
        {
            xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
        }
    }

    // var keyword = document.getElementById("keyword").value();
    // console.log("keyword:"+keyword);
    sendRequest("searchResultServlet?keyword=a");

    function sendRequest(url) {
        createXMLHttpRequest();
        xmlHttpRequest.open("GET", url, true);
        xmlHttpRequest.onreadystatechange = processResponse;
        xmlHttpRequest.send(null);
    }

    function processResponse() {
        if (xmlHttpRequest.readyState == 4) {
            if (xmlHttpRequest.status == 200) {
                var resp = xmlHttpRequest.responseText;
                //var resp2 = resp.split(',');

                var array = resp.split(",");
                console.log("the outcome is "+array);
                var autoComplete = new AutoComplete("keyword","auto",array);
                document.getElementById("keyword").onkeyup = function(event){
                    autoComplete.start(event);
                }
            }
        }
    }


</script>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="css/searchProduct.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="css/mouseEventInform.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="css/cartChange.css" type="text/css" media="screen" />


    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />

    <script type="text/javascript" src="<c:url value="/js/jquery-3.6.0.min.js"/>"></script>

</head>

<body>

<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a href="main"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <c:if test="${sessionScope.account!=null}">${sessionScope.account.username}</c:if>
            <c:if test="${sessionScope.account==null}">尚未登录</c:if>
<%--            购物车--%>

            <a href="viewCart">
                <img style="margin: 0 auto;" name="img_cart" src="images/cart.gif" />
            </a>
            <img style="margin: 0 auto;" src="images/separator.gif" />
            <%--            登录与登出--%>
            <c:if test="${sessionScope.account == null}">
                <a href="signOnForm">Sign In</a>
            </c:if>
            <c:if test="${sessionScope.account != null}">
                <a href="signOff">Sign out</a>
            </c:if>
            <c:if test="${sessionScope.account != null}">
                <img style="margin: 0 auto;" src="images/separator.gif" />
                <a href="userAccount">My Account</a>
            </c:if>
            <img style="margin: 0 auto;" src="images/separator.gif" />

            <a href="../help.html">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <!--搜索栏目-->
            <form action="searchProduct" method="post" name="searchForm">
                <input type="text" id="keyword" name="keywordName" size="14" autocomplete="off"/>

                <div class="auto hidden" id="auto">
                    <div class="auto_out">1</div>
                    <div class="auto_out">2</div>
                </div>

                <input type="submit" name="searchProducts" value="Search" />

            </form>
        </div>
    </div>
    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH">
            <img src="images/sm_fish.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=DOGS">
            <img src="images/sm_dogs.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=REPTILES">
            <img src="images/sm_reptiles.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=CATS">
            <img src="images/sm_cats.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS">
            <img src="images/sm_birds.gif" />
        </a>
    </div>

</div>

<div id="Content">